<template>
  <div class="article-manage" style="margin-left: 5px">
    <el-card
      shadow="always"
      :body-style="{ padding: '20px', display: 'flex', 'justify-content': 'end' }"
    >
      <el-row :gutter="20">
        <el-col
          :span="24"
          style="
            display: flex;
            align-items: end;
            justify-content: end;
            line-height: 40px;
            height: 40px;
          "
        >
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/landMark_manage' }"
              >地标管理</el-breadcrumb-item
            >
          </el-breadcrumb>
        </el-col>
        <el-col
          :span="12"
          style="
            display: flex;
            align-items: end;
            justify-content: end;
            line-height: 40px;
            height: 40px;
          "
        >
          <div class="grid-content bg-purple">
            <!-- <el-button @click="addTag" type="text"  icon="el-icon-plus" style="font-size:20px"></el-button> -->
            <el-button
              type="text"
              @click="refreshTable"
              icon="el-icon-refresh-right"
              style="font-size: 20px"
            ></el-button>
          </div>
        </el-col>
        <el-col
          :span="12"
          style="
            display: flex;
            align-items: end;
            justify-content: flex-end;
            line-height: 40px;
            height: 40px;
          "
        >
          <div class="grid-content bg-purple">
            <el-input placeholder="请输入内容" clearable v-model="searchValue">
              <template slot="append"
                ><i class="el-icon-search" @click="initTable" style="color: #409eff"></i
              ></template>
            </el-input>
          </div>
        </el-col>
        <el-col :span="24" class="tables">
          <div class="grid-content bg-purple">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column
                prop="layerId"
                label="图层标识"
                width="200"
              ></el-table-column>
              <el-table-column
                prop="fenceName"
                label="地标名称"
                width="120"
              ></el-table-column>
              <el-table-column
                prop="longitude"
                label="经度"
                width="170"
              ></el-table-column>
              <el-table-column prop="latitude" label="纬度" width="180"></el-table-column>
              <el-table-column prop="fileUrl" label="图片" width="180">
                <template slot-scope="scope">
                  <!-- <img :src="scope.row.image" min-width="70" height="70" /> -->
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.fileUrl"
                    :preview-src-list="[scope.row.fileUrl]"
                  >
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="image" label="二维码" width="180">
                <template slot-scope="scope">
                  <!-- <img :src="scope.row.image" min-width="70" height="70" /> -->
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.image"
                    :preview-src-list="[scope.row.image]"
                  >
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="120"></el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    @click="editTag(scope.row)"
                    type="text"
                    icon="el-icon-edit"
                    size="small"
                    style="font-size: 20px"
                  ></el-button>
                  <el-button
                    @click="deleteTagById(scope.row.layerId)"
                    type="text"
                    size="small"
                    icon="el-icon-delete"
                    style="font-size: 20px"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="24" style="display: flex; justify-content: end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <Dialog :dialogVisible.sync="addDialogVisible" titleName="添加标签" width="35%">
      <AddLandMark></AddLandMark>
    </Dialog>
    <Dialog :dialogVisible.sync="editDialogVisible" titleName="编辑标签" width="35%">
      <EditLandMark :fenceObj="fenceObj" @fatherMethod="fatherMethod"></EditLandMark>
    </Dialog>
  </div>
</template>
<script>
import Dialog from "../../components/Dialog";
import AddLandMark from "./AddLandMark";
import EditLandMark from "./EditLandMark";
export default {
  name: "LandMarkManage",
  data() {
    return {
      addDialogVisible: false,
      editDialogVisible: false,
      input2: "",
      currentPage4: 1,
      tableData: [],
      total: 0, //总数
      pageNum: 1,
      pageSize: 10,
      fenceObj: {},
      searchValue: "",
    };
  },
  components: {
    Dialog,
    AddLandMark,
    EditLandMark,
  },
  mounted() {
    this.initTable();
  },
  methods: {
    fatherMethod() {
      this.addDialogVisible = false;
      this.editDialogVisible = false;
      this.initTable();
    },
    initTable() {
      let that = this;
      that.$axios
        .get("http://localhost:9002/fence/seach", {
          params: {
            fenceName: that.searchValue,
            pageNum: that.pageNum,
            pageSize: that.pageSize,
          },
        })
        .then(function (res) {
          that.tableData = [];
          res.data.data.content.forEach((e) => {
            that.tableData.push({
              layerId: e.layerId,
              fenceName: e.fenceName,
              province: e.province,
              longitude: e.longitude,
              latitude: e.latitude,
              fileUrl: `http://localhost:9002${e.fileUrl}`,
              image: `http://localhost:9002/upload/qrcode/${e.layerId}.png`,
              status: e.status,
            });
          });
          that.pageNum = res.data.data.pageNum;
          // pageSize: 10
          that.currentPage4 = res.data.data.pageNum;
          that.total = res.data.data.totalSize;
          console.log(res);
          that.drawer = !that.drawer;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = val;
      this.initTable();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.initTable();
    },
    addTag: function () {
      this.addDialogVisible = true;
      this.editDialogVisible = false;
    },
    refreshTable() {
      this.initTable();
    },
    // eslint-disable-next-line no-unused-vars
    deleteTagById: function (layerId) {
      var _this = this;
      _this
        .$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          let that = this;
          that.$axios
            .get(`http://localhost:9002/fence/remove/${layerId}`, {})
            .then(function (res) {
              // eslint-disable-next-line no-debugger
              debugger;
              _this.initTable();
              console.log(res);
              _this.$message({
                type: "success",
                message: "删除成功",
              });
            })
            .catch(function (error) {
              console.log(error);
              _this.$message({
                type: "info",
                message: "删除失败",
              });
            });
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editTag: function (obj) {
      this.fenceObj = {};
      this.fenceObj = {
        fenceName: obj.fenceName,
        latitude: obj.latitude,
        layerId: obj.layerId,
        longitude: obj.longitude,
        remarks: obj.remarks,
        status: obj.status,
      };
      this.editDialogVisible = true;
      this.addDialogVisible = false;
    },
  },
};
</script>
<style>
.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 40px;
  line-height: 40px;
  text-align: left;
}
.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 40px;
  line-height: 40px;
  text-align: left;
}
.tables {
  margin-top: 5px;
  /* border:1px solid red; */
}
.el-input {
  width: 300px;
}
.article-manage {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
